<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <Hand @InputChang="InputChang" />
    <!-- 主体部分 -->
    <Body
      :list="redList"
      @changInput="changInput"
      @delList="delList"
      @addAll="addAll"
    />
    <!-- 底部部分 -->
    <Bottom
      :residue="residue"
      :type="type"
      :listResidue="listResidue"
      :complete="complete"
      @screen="screen"
      @delListAll="delListAll"
    />
  </section>
</template>

<script>
import Hand from '@/views/hand.vue'
import Body from '@/views/body.vue'
import Bottom from '@/views/bottom.vue'
export default {
  components: {
    Hand,
    Body,
    Bottom
  },
  data () {
    return {
      type: '',
      list: JSON.parse(localStorage.getItem('my_key')) || [
        { id: 1, name: '读万卷书', isflag: true },
        { id: 2, name: '行万里路', isflag: false },
        { id: 3, name: '打豆豆', isflag: false }
      ]
    }
  },
  methods: {
    changInput (data) {
      this.list.forEach(item => {
        if (item.id === data) {
          item.isflag = !item.isflag
        }
      })
    },
    InputChang (data) {
      this.list.push(data)
    },
    delList (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    addAll (flag) {
      this.list.forEach(item => (item.isflag = !flag))
    },
    screen (type) {
      this.type = type
    },
    delListAll () {
      this.list = this.list.filter(item => !item.isflag)
    }
  },
  computed: {
    residue () {
      return this.list.filter(item => !item.isflag).length
    },
    listResidue () {
      return this.list.length
    },
    redList () {
      switch (this.type) {
        case 'listAll':
          return this.list
        case 'active':
          return this.list.filter(item => !item.isflag)

        case 'completed':
          return this.list.filter(item => item.isflag)

        default:
          return this.list
      }
    },
    complete () {
      return this.list.filter(item => item.isflag).length
    }
  },
  watch: {
    list: {
      deep: true,
      handler (value) {
        localStorage.setItem('my_key', JSON.stringify(value))
      }
    }
  }
}
</script>

<style></style>
